<template>
    <div class="listDiv pd10">
        <div class="searchDiv">
            <el-form class="searchLeft" ref="serform" :model="obj.req" label-position="top">
                <el-form-item class="serlabelB mr20" label="问题标题：" prop="key">
                    <el-input v-model="obj.req.key" placeholder="请输入配置名称" clearable />
                </el-form-item>
                <el-form-item class="mr20">
                    <el-button type="primary" @click="obj.req.currentpage=1;init()">查询</el-button>
                    <el-button plain @click="proxy.$refs['serform'].resetFields();init()">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="add">添加推荐问题</el-button>
        </div>
        <el-table :data="obj.ary" style="width: 100%;flex: 1;"
            :header-cell-style="{ background: '#E5E6EB', color: '#333333' }">
            <el-table-column prop="title" label="推荐问题">
                <template #default="scope">
                    <div class="flex-row-center">
                        <div>{{ scope.row.title }}</div>
                        <div class="flex-row-center ml10">
                            <el-button type="primary" size="small" plain circle :icon="CaretTop" @click="updown(scope.row, 0)"></el-button>
                            <el-button type="primary" size="small" plain circle :icon="CaretBottom" @click="updown(scope.row, 1)"></el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="sort" label="排序" width="80"></el-table-column> -->
            <el-table-column prop="height" label="操作" width="140">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-popconfirm title="确定要删除吗？" @confirm="del(scope.row)">
                        <template #reference>
                            <el-button type="danger" plain size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        
        <div class="flex-center mt10">
            <el-pagination
                background
                size="small"
                @size-change="init()"
                @current-change="init()"
                v-model:current-page="obj.req.currentpage"
                :page-sizes="[10, 20, 50, 100]"
                v-model:page-size="obj.req.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="obj.req.count">
                </el-pagination>
        </div>

        <el-drawer v-model="obj.drawer.show" :title="obj.drawer.title" size="50%" direction="rtl" :close-on-click-modal="false" destroy-on-close>
            <Edit v-model:data="obj.drawer.data" @init="init" @close="obj.drawer.show = false" />
        </el-drawer>
    </div>
</template>

<script setup>
    import { reactive,getCurrentInstance } from 'vue'
    import Edit from './edit.vue'
    import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            show: false,
            title: "",
            data: {}
        },
        ary:[],
        req: {
            key:"",
            type: 0,
            currentpage: 1,
            pagesize: 10,
            count: 0,
        }
    })

    let init = () => {
        proxy.$ajax({
            url: '/manager/problem/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }
    init()

    let add = () => {
        obj.drawer.show = true
        obj.drawer.title = `添加推荐问题`
        obj.drawer.data = { problem_id:0,type:obj.req.type, title:"" }
    }
    let edit = x => {
        obj.drawer.show = true
        obj.drawer.title = `修改推荐问题`
        obj.drawer.data = {...x,type:obj.req.type}
    }
    let del = x => {
        proxy.$ajax({
            url: '/manager/problem/delete',
            data: { problem_id: x.problem_id, type: obj.req.type },
            bfLoading: true
        }).then(da => {
            if(da.success){
                proxy.elMessageMixin(`成功`, 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }

    const updown=(x,sort)=>{
        proxy.$ajax({
            url: '/manager/problem/move',
            data: { problem_id: x.problem_id, dir: sort, type: obj.req.type },
            bfLoading: true
        }).then(da => {
            if(da.success){
                proxy.elMessageMixin(`成功`, 'success')

                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
.updownicon:hover{color: #409eff;}
</style>